<template>
  <div
    :class="[
      $store.state.appPrefix + '-menubar',
      $store.state.appPrefix + '-menubar--' + mode,
      collapse ? $store.state.appPrefix + '-menubar--collapse' : '',
    ]"
    :style="{
      'min-width': minWidthC,
      'max-width': maxWidth + 'px',
      width: width + 'px',
    }"
  >
    <div :class="[$store.state.appPrefix + '-menubar__wrap']">
      <div :class="[$store.state.appPrefix + '-menubar__wrap--menus']" ignore-scroll="true">
        <slot></slot>
      </div>
      <slot v-if="$slots.collapseIcon" name="collapseIcon"></slot>
      <template v-else>
        <div
          :class="[$store.state.appPrefix + '-menubar__wrap--foldicon']"
          @click="setCollapse"
        >
          <i
            :class="[
              'el-icon',
              collapse ? collapseOpenIcon : collapseCloseIcon,
            ]"
          ></i>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import defaultAvatarSrc from 'assets/images/default_avatar.png'

export default {
  name: 'Menubar',
  componentName: 'Menubar',

  props: {
    logoSrc: String,
    avatarSrc: {
      type: String,
      default: defaultAvatarSrc,
    },
    contentWidth: [String, Number],
    minWidth: [String, Number],
    maxWidth: [String, Number],
    width: [String, Number],
    mode: {
      type: String,
      default: 'horizontal',
    },
    collapse: {
      type: Boolean,
      default: false,
    },
    collapseOpenIcon: {
      type: String,
      default: 'el-icon-s-fold',
    },
    collapseCloseIcon: {
      type: String,
      default: 'el-icon-s-unfold',
    },
  },
  computed: {
    minWidthC() {
      let minWidthVal;
      if (this.minWidth) {
        minWidthVal = `${this.minWidth}px`;
      } else {
        minWidthVal = this.contentWidth
          ? `${parseInt(this.contentWidth, 10) + 48}px`
          : '';
      }
      return minWidthVal;
    },
  },
  methods: {
    setCollapse() {
      this.$emit('toggleCollapse');
    },
  },
};
</script>
